/*时间轴页面显示位置*/
.map-container .container-fluid {
  width: 1050px;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 300px;
}

/*时间轴主区设置*/  
.timeaxis-wrapper  
{  
    overflow-x: auto;  
    overflow-y: hidden;  
    display: block;  
    margin-right: 15px;  
    padding-left: 15px;  
    overflow-x: auto;  
    overflow-y: hidden;  
}  
/*时间轴箭头设置*/  
/*.timeaxis-wrapper:before  
{  
    position: relative;  
    top: 63px;  
    left: -15px;  
    display: inline-block;  
    border-top: 7px solid transparent;  
    border-left: 0 solid #208FE4;  
    border-right: 15px solid #208FE4;  
    border-bottom: 7px solid transparent;  
    content: " ";  
} */ 
  
.timeaxis  
{  
    padding: 0;  
    list-style: none;  
    height: 100px;  
    position: relative;  
    width: 100%;  
    display: inline-flex;  
}  
  
/*时间轴线设置*/  
.timeaxis:before  
{  
    top: 0;  
    bottom: 0;  
    position: absolute;  
    content: " ";  
    height: 3px;  
    background-color: #208FE4;  
    top: 57px;  
    width: 100%;  
}  
/*轴线点设置*/  
.timeaxis-point  
{  
    width: 20px;  
    height: 20px;  
    top: 48px;  
    margin-left: 4px;  
    border-radius: 10px;  
    border: 1px solid #208FE4;  
    background-color: #ffffff;  
    background-repeat: no-repeat;  
    position: absolute;  
}  
  
.timeaxis-point span  
{  
    color: #bab9c9;  
    font-size: 10px;  
    padding: 0;  
    margin: 0;  
    position: relative;  
    left: -5px;  
}  
  
  
/*设置区域*/  
.timeaxis li  
{  
    float: left;  
    width: 40px;  
    height: 30px;  
}  
  
a .timeaxis-panel  
{  
    background-color: #fff;  
    float: left;  
    top: 5px;  
    /*left: 20%;*/
    border: 1px solid #d4d4d4;  
    border-radius: 2px;  
    text-align: center;
    /*width: 60%;  */
    height: 100%;  
    position: relative;  
    padding: 5px 5px;  
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175);  
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175);  
}  
  
a .timeaxis-panel span  
{  
    color: #333333;  
}  
  
.timeaxis-panel:before  
{  
    position: absolute;  
    bottom: -13px;  
    top: auto;  
    left: 3px;  
    display: inline-block;  
    border-top: 13px solid #ccc;  
    border-left: 11px solid transparent;  
    border-right: 11px solid transparent;  
    border-bottom: 0px solid #ccc;  
    content: " ";  
}  
  
.timeaxis-panel:after  
{  
    position: absolute;  
    bottom: -12px;  
    top: auto;  
    left: 3px;  
    border-top: 12px solid #fff;  
    border-left: 10px solid transparent;  
    border-right: 10px solid transparent;  
    border-bottom: 0px solid #fff;  
    content: " ";  
}  
  
a.active .timeaxis-panel,  
a:focus .timeaxis-panel  
{  
    border: 1px solid #208FE4;  
    background-color: #208FE4;  
}  
  
a.active .timeaxis-panel span,  
a:focus .timeaxis-panel span  
{  
    color: #ffffff;  
}  

a.active .timeaxis-panel:before,  
a:focus .timeaxis-panel:before  
{  
    position: absolute;  
    bottom: -13px;  
    top: auto;  
    left: 3px;  
    display: inline-block;  
    border-top: 13px solid #208FE4;  
    border-left: 11px solid transparent;  
    border-right: 11px solid transparent;  
    border-bottom: 0px solid #208FE4;  
    content: " ";  
}  
  
a.active .timeaxis-panel:after,  
a:focus .timeaxis-panel:after  
{  
    position: absolute;  
    bottom: -12px;  
    top: auto;  
    left: 3px;  
    border-top: 12px solid #208FE4;  
    border-left: 10px solid transparent;  
    border-right: 10px solid transparent;  
    border-bottom: 0px solid #208FE4;  
    content: " ";  
}  
  
a.active .timeaxis-point  
{  
    width: 20px;  
    height: 20px;  
    top: 48px;  
    margin-left: 4px;  
    border-radius: 10px;  
    border: 2px solid #ffffff;  
    background-color: #208FE4;  
    background-repeat: no-repeat;  
    position: absolute;  
}  
  
.timeaxis-inverted .timeaxis-panel  
{  
    top: 67px;  
}  
  
.timeaxis-inverted .timeaxis-panel:before  
{  
    position: absolute;  
    bottom: auto;  
    top: -12px;  
    left: 57px;  
    display: inline-block;  
    border-top: 0px solid #ccc;  
    border-left: 11px solid transparent;  
    border-right: 11px solid transparent;  
    border-bottom: 12px solid #ccc;  
    content: " ";  
}  

.timeaxis-inverted .timeaxis-panel:after  
{  
    position: absolute;  
    bottom: auto;  
    top: -11px;  
    left: 58px;  
    border-top: 0px solid #fff;  
    border-left: 10px solid transparent;  
    border-right: 10px solid transparent;  
    border-bottom: 11px solid #fff;  
    content: " ";  
}  

.timeaxis-inverted a.active .timeaxis-panel:before,  
.timeaxis-inverted a:focus .timeaxis-panel:before  
{  
    position: absolute;  
    bottom: auto;  
    top: -12px;  
    left: 57px;  
    display: inline-block;  
    border-top: 0px solid #208FE4;  
    border-left: 11px solid transparent;  
    border-right: 11px solid transparent;  
    border-bottom: 12px solid #208FE4;  
    content: " ";  
}  

.timeaxis-inverted a.active .timeaxis-panel:after,  
.timeaxis-inverted a:focus .timeaxis-panel:after  
{  
    position: absolute;  
    bottom: auto;  
    top: -11px;  
    left: 58px;  
    display: inline-block;  
    border-top: 0px solid #208FE4;  
    border-left: 10px solid transparent;  
    border-right: 10px solid transparent;  
    border-bottom: 11px solid #208FE4;  
    content: " ";  
}  

.timeaxis-hide {  
    width: 100%;  
    padding-left: 50%;  
    height: 15px;  
    background-color: #208FE4;  
    color: #ffffff;  
    position: relative;  
    display: inline-block;  
}  